<!-- build time:Tue Apr 28 2020 09:17:48 GMT+0800 (GMT+08:00) --><!DOCTYPE html><html class="theme-next pisces use-motion" lang="zh-Hans"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><meta name="theme-color" content="#222"><script src="//cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js"></script><link href="//cdn.jsdelivr.net/npm/pace-js@1.0.2/themes/blue/pace-theme-minimal.css" rel="stylesheet"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css"><link href="https://fonts.loli.net/css?family=EB+Garamond:400,400i,700,700i|Noto+Serif+SC:400,500,700&display=swap&subset=chinese-simplified" rel="stylesheet"><link href="//cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"><link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css"><link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4"><link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4"><link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4"><link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222"><meta name="keywords" content="hexo+sakura'美化"><link rel="alternate" href="/atom.xml" title="云开の博客" type="application/atom+xml"><meta name="description" content="标签、分类页面美化📚"><meta property="og:type" content="article"><meta property="og:title" content="hexo(sakura)——标签、分类页面美化"><meta property="og:url" content="https://chenyunxin.cn/posts/1736494633.html"><meta property="og:site_name" content="云开の博客"><meta property="og:description" content="标签、分类页面美化📚"><meta property="og:image" content="https://cdn.jsdelivr.net/gh/1999cyx/images/img/20200425204844.png"><meta property="article:published_time" content="2020-04-25T12:35:13.000Z"><meta property="article:modified_time" content="2020-04-25T14:32:11.635Z"><meta property="article:author" content="云开、见月明"><meta property="article:tag" content="hexo+sakura&#39;美化"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://cdn.jsdelivr.net/gh/1999cyx/images/img/20200425204844.png"><script type="text/javascript" id="hexo.configurations">var NexT=window.NexT||{},CONFIG={root:"/",scheme:"Pisces",version:"5.1.4",sidebar:{position:"left",display:"post",offset:12,b2t:!1,scrollpercent:!0,onmobile:!0},fancybox:!0,tabs:!0,motion:{enable:!0,async:!1,transition:{post_block:"flipYIn",post_header:"perspectiveRightIn",post_body:"perspectiveLeftIn",coll_header:"perspectiveDownIn",sidebar:"perspectiveUpIn"}},duoshuo:{userId:"0",author:"博主"},algolia:{applicationID:"",apiKey:"",indexName:"",hits:{per_page:10},labels:{input_placeholder:"Search for Posts",hits_empty:"We didn't find any results for the search: ${query}",hits_stats:"${hits} results found in ${time} ms"}}}</script><link rel="canonical" href="https://chenyunxin.cn/posts/1736494633.html"><script></script><title>hexo(sakura)——标签、分类页面美化 | 云开の博客</title><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/1999cyx/cdn@1.0/js/src/bubble.js"></script><meta name="generator" content="Hexo 4.2.0"></head><body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans"><div class="container sidebar-position-left page-post-detail"><div class="headband"></div><a href="https://github.com/1999cyx" target="_blank" rel="noopener" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#64CEAA;color:#fff;position:absolute;top:0;border:0;right:0" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style><header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="header-inner"><div class="site-brand-wrapper"><div class="site-meta"><div class="custom-logo-site-title"><a href="/" class="brand" rel="start"><span class="logo-line-before"><i></i></span> <span class="site-title">云开の博客</span> <span class="logo-line-after"><i></i></span></a></div><h1 class="site-subtitle" itemprop="description">梦醒繁华，一城荒芜！</h1></div><div class="site-nav-toggle"><button><span class="btn-bar"></span> <span class="btn-bar"></span> <span class="btn-bar"></span></button></div></div><nav class="site-nav"><ul id="menu" class="menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="menu-item-icon fa fa-fw fa-home"></i><br>首页</a></li><li class="menu-item menu-item-archive"><a href="/archives/" rel="section"><i class="menu-item-icon fa fa-fw fa-archive"></i><br>归档</a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="menu-item-icon fa fa-fw fa-th"></i><br>分类</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="menu-item-icon fa fa-fw fa-tags"></i><br>标签</a></li><li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="menu-item-icon fa fa-fw fa-user"></i><br>关于</a></li><li class="menu-item menu-item-comments"><a href="/comment/" rel="section"><i class="menu-item-icon fa fa-fw fa-comment"></i><br>留言</a></li><li class="menu-item menu-item-links"><a href="/links/" rel="section"><i class="menu-item-icon fa fa-fw fa-link"></i><br>友链</a></li><li class="menu-item menu-item-search"><a href="javascript:;" class="popup-trigger"><i class="menu-item-icon fa fa-search fa-fw"></i><br>搜索</a></li></ul><div class="site-search"><div class="popup search-popup local-search-popup"><div class="local-search-header clearfix"><span class="search-icon"><i class="fa fa-search"></i> </span><span class="popup-btn-close"><i class="fa fa-times-circle"></i></span><div class="local-search-input-wrapper"><input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input"></div></div><div id="local-search-result"></div></div></div></nav><link href="https://cdn.repository.webfont.com/webfonts/nomal/136790/19356/5e7983c3f629d80b70b700b8.css" rel="stylesheet" type="text/css"></div></header><main id="main" class="main"><div class="main-inner"><div class="content-wrap"><div id="content" class="content"><div id="posts" class="posts-expand"><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://chenyunxin.cn/posts/1736494633.html"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="云开、见月明"><meta itemprop="description" content=""><meta itemprop="image" content="https://cdn.jsdelivr.net/gh/1999cyx/cdn@1.0/images/cloudYun.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="云开の博客"></span><header class="post-header"><h2 class="post-title" itemprop="name headline">hexo(sakura)——标签、分类页面美化</h2><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-04-25T20:35:13+08:00">2020-04-25 </time></span><span class="post-category"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/%E7%BE%8E%E5%8C%96/" itemprop="url" rel="index"><span itemprop="name">美化</span> </a></span>， <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/%E7%BE%8E%E5%8C%96/hexo/" itemprop="url" rel="index"><span itemprop="name">hexo</span> </a></span></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/posts/1736494633.html#comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/posts/1736494633.html" itemprop="commentCount"></span> </a></span><span id="/posts/1736494633.html" class="leancloud_visitors" data-flag-title="hexo(sakura)——标签、分类页面美化"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-paw"></i> </span><span class="post-meta-item-text">热度&#58;</span> <span class="leancloud-visitors-count"></span> <span>℃</span> </span><span class="post-wordcount"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">字数&#58;</span> <span title="字数">3.8k 字 </span><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">阅读时长 &asymp;</span> <span title="阅读时长">20 分钟</span></span></div></header><div class="post-body" itemprop="articleBody"><div class="post-gallery" itemscope itemtype="http://schema.org/ImageGallery"><div class="post-gallery-row"><a class="post-gallery-img fancybox" href="https://cdn.jsdelivr.net/gh/1999cyx/images/img/20200425204844.png" rel="gallery_ck9j80jwf000zqguf9gtl8he0" itemscope itemtype="http://schema.org/ImageObject" itemprop="url"><img src="https://cdn.jsdelivr.net/gh/1999cyx/cdn@1.0/images/loading.gif" data-original="https://cdn.jsdelivr.net/gh/1999cyx/images/img/20200425204844.png" itemprop="contentUrl"></a></div></div><h1 id="一、效果"><a href="#一、效果" class="headerlink" title="一、效果"></a>一、效果</h1><p>首先来看一下标签、分类页面美化后的效果<img src="https://cdn.jsdelivr.net/gh/1999cyx/cdn@1.0/images/loading.gif" data-original="https://cdn.jsdelivr.net/gh/drew233/cdn/20200409130258.webp" style="zoom:67%"></p><p>标签页面美化👇</p><img src="https://cdn.jsdelivr.net/gh/1999cyx/cdn@1.0/images/loading.gif" data-original="https://cdn.jsdelivr.net/gh/1999cyx/images/img/20200425204503.png" style="zoom:67%"><p>分类页面美化👇</p><img src="https://cdn.jsdelivr.net/gh/1999cyx/cdn@1.0/images/loading.gif" data-original="https://cdn.jsdelivr.net/gh/1999cyx/images/img/20200425204844.png" style="zoom:67%"><h1 id="二、标签页面"><a href="#二、标签页面" class="headerlink" title="二、标签页面"></a>二、标签页面</h1><h2 id="1-tags页面资源文件"><a href="#1-tags页面资源文件" class="headerlink" title="1. tags页面资源文件"></a>1. tags页面资源文件</h2><ol><li><p>首先要新建一个tags页面</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="PLAIN"><figure class="iseeu highlight /plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo new page tags</span><br></pre></td></tr></table></figure></div></li><li><p>编辑tags页面</p><p>打开站点文件夹下的<code>source\tags\index.md</code>，添加：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="DIFF"><figure class="iseeu highlight /diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">---</span></span><br><span class="line">title: tags</span><br><span class="line"><span class="addition">+ layout: tags-bubble</span></span><br><span class="line">date: 2020-4-25 22:14:16</span><br><span class="line"><span class="comment">---</span></span><br></pre></td></tr></table></figure></div></li><li><p>在主题的<code>_config.yml</code>中添加：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="YML"><figure class="iseeu highlight /yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">标签:</span> <span class="string">&#123;path:</span> <span class="string">/tags,</span> <span class="attr">fa:</span> <span class="string">fa-tags</span> <span class="string">&#125;,</span></span><br></pre></td></tr></table></figure></div><img src="https://cdn.jsdelivr.net/gh/1999cyx/cdn@1.0/images/loading.gif" data-original="https://cdn.jsdelivr.net/gh/1999cyx/images/img/20200425213335.png" style="zoom:67%"></li></ol><h2 id="2-创建样式文件"><a href="#2-创建样式文件" class="headerlink" title="2. 创建样式文件"></a>2. 创建样式文件</h2><h3 id="标签页面"><a href="#标签页面" class="headerlink" title="标签页面"></a>标签页面</h3><p>在<code>themes\sakura\layout</code>文件夹下新建<code>tags-bubble.ejs</code>文件，添加以下代码：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="HTML"><figure class="iseeu highlight /html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"/js/bubble.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"blank"</span> <span class="attr">style</span>=<span class="string">"padding-top: 75px;"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"content"</span> <span class="attr">class</span>=<span class="string">"site-content"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"main"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">header</span> <span class="attr">class</span>=<span class="string">"page-header"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">h1</span> <span class="attr">class</span>=<span class="string">"cat-title"</span>&gt;</span></span><br><span class="line">                标签云<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"cat-des"</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">%-</span> "<span class="attr">Tags</span> " + <span class="attr">site.tags.length</span> %&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">header</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"main-part"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"tag-cloud"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"tag-cloud-tags"</span> <span class="attr">hidden</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">%-</span> <span class="attr">tagcloud</span>(&#123;</span></span><br><span class="line"><span class="tag">                    <span class="attr">min_font:</span> <span class="attr">15</span>,</span></span><br><span class="line"><span class="tag">                    <span class="attr">max_font:</span> <span class="attr">30</span>,</span></span><br><span class="line"><span class="tag">                    <span class="attr">amount:</span> <span class="attr">200</span>,</span></span><br><span class="line"><span class="tag">                    <span class="attr">color:</span> <span class="attr">true</span>,</span></span><br><span class="line"><span class="tag">                    <span class="attr">start_color:</span> '#<span class="attr">ff6666</span>',</span></span><br><span class="line"><span class="tag">                    <span class="attr">end_color:</span> '#<span class="attr">0099cc</span>'</span></span><br><span class="line"><span class="tag">                    &#125;) %&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"tagwrapper"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"tagbubble"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span></span><br><span class="line"><span class="javascript">                <span class="keyword">var</span> alltags = <span class="built_in">document</span>.getElementsByClassName(<span class="string">'tag-cloud-tags'</span>);</span></span><br><span class="line"><span class="actionscript">                <span class="keyword">var</span> tags = alltags[<span class="number">0</span>].getElementsByTagName(<span class="string">'a'</span>);</span></span><br><span class="line"></span><br><span class="line"><span class="javascript">                <span class="keyword">var</span> bo = <span class="keyword">new</span> <span class="built_in">Array</span>();</span></span><br><span class="line"><span class="javascript">                <span class="keyword">var</span> co = <span class="keyword">new</span> <span class="built_in">Array</span>();</span></span><br><span class="line"><span class="actionscript">                <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">4</span>; i++) &#123;</span></span><br><span class="line"><span class="actionscript">                    bo.push(<span class="string">"b"</span> + i);</span></span><br><span class="line">                &#125;</span><br><span class="line"><span class="actionscript">                <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">7</span>; i++) &#123;</span></span><br><span class="line"><span class="actionscript">                    co.push(<span class="string">"c"</span> + i);</span></span><br><span class="line">                &#125;</span><br><span class="line"></span><br><span class="line"><span class="javascript">                <span class="keyword">var</span> divDom = <span class="built_in">document</span>.querySelector(<span class="string">'.tagbubble'</span>)</span></span><br><span class="line"><span class="actionscript">                    <span class="comment">//var divDom = document.getElementsByClassName('tagbubble')[0];</span></span></span><br><span class="line"><span class="actionscript">                <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; tags.length; i++) &#123;</span></span><br><span class="line"><span class="javascript">                    <span class="keyword">var</span> atag = <span class="built_in">document</span>.createElement(<span class="string">'a'</span>);</span></span><br><span class="line"><span class="javascript">                    <span class="keyword">var</span> boStyle = bo[<span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random() * <span class="number">4</span>)];</span></span><br><span class="line"><span class="javascript">                    <span class="keyword">var</span> coStyle = co[<span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random() * <span class="number">7</span>)];</span></span><br><span class="line">                    if (tags[i].innerText.length &gt; 10) &#123;</span><br><span class="line"><span class="actionscript">                        boStyle = <span class="string">"b0"</span>;</span></span><br><span class="line"><span class="actionscript">                    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (tags[i].innerText.length &gt; <span class="number">5</span> &amp;&amp; tags[i].innerText.length &lt; <span class="number">10</span>) &#123;</span></span><br><span class="line"><span class="actionscript">                        boStyle = <span class="string">"b1"</span>;</span></span><br><span class="line">                    &#125;</span><br><span class="line"><span class="actionscript">                    atag.setAttribute(<span class="string">"class"</span>, boStyle + <span class="string">" "</span> + coStyle);</span></span><br><span class="line"><span class="actionscript">                    atag.setAttribute(<span class="string">"href"</span>, tags[i].href);</span></span><br><span class="line">                    atag.innerText = tags[i].innerText;</span><br><span class="line">                    divDom.appendChild(atag);</span><br><span class="line">                &#125;</span><br><span class="line"></span><br><span class="line"><span class="actionscript">                <span class="function"><span class="keyword">function</span> <span class="title">browserRedirect</span><span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">                    <span class="keyword">var</span> sUserAgent = navigator.userAgent.toLowerCase();</span></span><br><span class="line"><span class="javascript">                    <span class="keyword">var</span> bIsIpad = sUserAgent.match(<span class="regexp">/ipad/i</span>) == <span class="string">"ipad"</span>;</span></span><br><span class="line"><span class="javascript">                    <span class="keyword">var</span> bIsIphoneOs = sUserAgent.match(<span class="regexp">/iphone os/i</span>) == <span class="string">"iphone os"</span>;</span></span><br><span class="line"><span class="javascript">                    <span class="keyword">var</span> bIsMidp = sUserAgent.match(<span class="regexp">/midp/i</span>) == <span class="string">"midp"</span>;</span></span><br><span class="line"><span class="javascript">                    <span class="keyword">var</span> bIsUc7 = sUserAgent.match(<span class="regexp">/rv:1.2.3.4/i</span>) == <span class="string">"rv:1.2.3.4"</span>;</span></span><br><span class="line"><span class="javascript">                    <span class="keyword">var</span> bIsUc = sUserAgent.match(<span class="regexp">/ucweb/i</span>) == <span class="string">"ucweb"</span>;</span></span><br><span class="line"><span class="javascript">                    <span class="keyword">var</span> bIsAndroid = sUserAgent.match(<span class="regexp">/android/i</span>) == <span class="string">"android"</span>;</span></span><br><span class="line"><span class="javascript">                    <span class="keyword">var</span> bIsCE = sUserAgent.match(<span class="regexp">/windows ce/i</span>) == <span class="string">"windows ce"</span>;</span></span><br><span class="line"><span class="javascript">                    <span class="keyword">var</span> bIsWM = sUserAgent.match(<span class="regexp">/windows mobile/i</span>) == <span class="string">"windows mobile"</span>;</span></span><br><span class="line">                    if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) &#123;</span><br><span class="line"><span class="actionscript">                        <span class="comment">//移动端页面</span></span></span><br><span class="line"><span class="actionscript">                        <span class="keyword">return</span> <span class="number">80</span>;</span></span><br><span class="line"><span class="actionscript">                    &#125; <span class="keyword">else</span> &#123;</span></span><br><span class="line"><span class="actionscript">                        <span class="comment">//pc端页面</span></span></span><br><span class="line"><span class="actionscript">                        <span class="keyword">return</span> <span class="number">150</span>;</span></span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;</span><br><span class="line"></span><br><span class="line"><span class="actionscript">                <span class="keyword">var</span> tagRadius = browserRedirect();</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">                <span class="comment">/*3D标签云*/</span></span></span><br><span class="line">                tagcloud(&#123;</span><br><span class="line"><span class="actionscript">                    selector: <span class="string">".tagbubble"</span>, <span class="comment">//元素选择器</span></span></span><br><span class="line"><span class="actionscript">                    fontsize: <span class="number">14</span>, <span class="comment">//基本字体大小, 单位px</span></span></span><br><span class="line"><span class="actionscript">                    radius: tagRadius, <span class="comment">//滚动半径, 单位px 页面宽度和高度的五分之一</span></span></span><br><span class="line"><span class="actionscript">                    mspeed: <span class="string">"slow"</span>, <span class="comment">//滚动最大速度, 取值: slow, normal(默认), fast</span></span></span><br><span class="line"><span class="actionscript">                    ispeed: <span class="string">"slow"</span>, <span class="comment">//滚动初速度, 取值: slow, normal(默认), fast</span></span></span><br><span class="line"><span class="actionscript">                    direction: <span class="number">135</span>, <span class="comment">//初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...</span></span></span><br><span class="line"><span class="actionscript">                    keep: <span class="literal">false</span> <span class="comment">//鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动</span></span></span><br><span class="line">                &#125;);</span><br><span class="line">            <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">            <span class="comment">&lt;!-- hexo-tag-cloud --&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure></div><h3 id="创建样式文件"><a href="#创建样式文件" class="headerlink" title="创建样式文件"></a>创建样式文件</h3><p>在<code>themes\sakura\layout\source\css</code>文件夹下新建一个<code>tag-bubble.css</code>文件，添加以下代码：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="CSS"><figure class="iseeu highlight /css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.tagwrapper</span> &#123;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span> auto;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">220px</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">700px</span>;</span><br><span class="line">    <span class="attribute">min-width</span>: <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.tagbubble</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    <span class="attribute">margin-top</span>: <span class="number">300px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.tagbubble</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: block;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line">    <span class="attribute">font-weight</span>: bold;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line">    <span class="attribute">text-decoration</span>: none;</span><br><span class="line">    <span class="attribute">text-align</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.b0</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">95px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">90px</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">90px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.b1</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">70px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">70px</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">55px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.b2</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">60px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">60px</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">60px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.b3</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">45px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">45px</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">40px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.c0</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-moz-linear-gradient</span>(top, #d1e5fd <span class="number">0%</span>, #<span class="number">3</span>d86f4 <span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-webkit-linear-gradient</span>(top, #d1e5fd <span class="number">0%</span>, #<span class="number">3</span>d86f4 <span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-o-linear-gradient</span>(top, #d1e5fd <span class="number">0%</span>, #<span class="number">3</span>d86f4 <span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-ms-linear-gradient</span>(top, #d1e5fd <span class="number">0%</span>, #<span class="number">3</span>d86f4 <span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(to bottom, #d1e5fd <span class="number">0%</span>, #<span class="number">3</span>d86f4 <span class="number">100%</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.c1</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-moz-linear-gradient</span>(top, #b9f8ff <span class="number">0%</span>, #<span class="number">1</span>de7ff <span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-webkit-linear-gradient</span>(top, #b9f8ff <span class="number">0%</span>, #<span class="number">1</span>de7ff <span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-o-linear-gradient</span>(top, #b9f8ff <span class="number">0%</span>, #<span class="number">1</span>de7ff <span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-ms-linear-gradient</span>(top, #b9f8ff <span class="number">0%</span>, #<span class="number">1</span>de7ff <span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(to bottom, #b9f8ff <span class="number">0%</span>, #<span class="number">1</span>de7ff <span class="number">100%</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.c2</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-moz-linear-gradient</span>(top, #fff4e2 <span class="number">0%</span>, #ffd79c <span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-webkit-linear-gradient</span>(top, #fff4e2 <span class="number">0%</span>, #ffd79c <span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-o-linear-gradient</span>(top, #fff4e2 <span class="number">0%</span>, #ffd79c <span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-ms-linear-gradient</span>(top, #fff4e2 <span class="number">0%</span>, #ffd79c <span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(to bottom, #fff4e2 <span class="number">0%</span>, #ffd79c <span class="number">100%</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.c3</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-moz-linear-gradient</span>(top, #fef4fa <span class="number">0%</span>, #fbbae0 <span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-webkit-linear-gradient</span>(top, #fef4fa <span class="number">0%</span>, #fbbae0 <span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-o-linear-gradient</span>(top, #fef4fa <span class="number">0%</span>, #fbbae0 <span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-ms-linear-gradient</span>(top, #fef4fa <span class="number">0%</span>, #fbbae0 <span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(to bottom, #fef4fa <span class="number">0%</span>, #fbbae0 <span class="number">100%</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.c4</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-moz-linear-gradient</span>(top, #fedc90 <span class="number">0%</span>, #ffb515 <span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-webkit-linear-gradient</span>(top, #fedc90 <span class="number">0%</span>, #ffb515 <span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-o-linear-gradient</span>(top, #fedc90 <span class="number">0%</span>, #ffb515 <span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-ms-linear-gradient</span>(top, #fedc90 <span class="number">0%</span>, #ffb515 <span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(to bottom, #fedc90 <span class="number">0%</span>, #ffb515 <span class="number">100%</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.c5</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-moz-linear-gradient</span>(top, #bcf7ca <span class="number">0%</span>, #<span class="number">1</span>fda4b <span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-webkit-linear-gradient</span>(top, #bcf7ca <span class="number">0%</span>, #<span class="number">1</span>fda4b <span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-o-linear-gradient</span>(top, #bcf7ca <span class="number">0%</span>, #<span class="number">1</span>fda4b <span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-ms-linear-gradient</span>(top, #bcf7ca <span class="number">0%</span>, #<span class="number">1</span>fda4b <span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(to bottom, #bcf7ca <span class="number">0%</span>, #<span class="number">1</span>fda4b <span class="number">100%</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.c6</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-moz-linear-gradient</span>(top, #f7cdf8 <span class="number">0%</span>, #db43e7 <span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-webkit-linear-gradient</span>(top, #f7cdf8 <span class="number">0%</span>, #db43e7 <span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-o-linear-gradient</span>(top, #f7cdf8 <span class="number">0%</span>, #db43e7 <span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-ms-linear-gradient</span>(top, #f7cdf8 <span class="number">0%</span>, #db43e7 <span class="number">100%</span>);</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(to bottom, #f7cdf8 <span class="number">0%</span>, #db43e7 <span class="number">100%</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 移动端样式 */</span></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">max-width:</span> <span class="number">767px</span>) &#123;</span><br><span class="line">    <span class="selector-class">.tagwrapper</span> &#123;</span><br><span class="line">        <span class="attribute">width</span>: <span class="number">10px</span>;</span><br><span class="line">        <span class="attribute">margin-left</span>: <span class="number">20px</span>;</span><br><span class="line">        <span class="attribute">min-width</span>: <span class="number">0px</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="selector-class">.tagbubble</span> &#123;</span><br><span class="line">        <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line">        <span class="attribute">min-width</span>: <span class="number">0px</span>;</span><br><span class="line">        <span class="attribute">margin-top</span>: <span class="number">200px</span>;</span><br><span class="line">        <span class="attribute">margin-left</span>: <span class="number">10px</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="selector-class">.tagbubble</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line">        <span class="attribute">font-size</span>: <span class="number">13px</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="selector-class">.b0</span> &#123;</span><br><span class="line">        <span class="attribute">width</span>: <span class="number">65px</span>;</span><br><span class="line">        <span class="attribute">height</span>: <span class="number">65px</span>;</span><br><span class="line">        <span class="attribute">line-height</span>: <span class="number">60px</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="selector-class">.b1</span> &#123;</span><br><span class="line">        <span class="attribute">width</span>: <span class="number">50px</span>;</span><br><span class="line">        <span class="attribute">height</span>: <span class="number">50px</span>;</span><br><span class="line">        <span class="attribute">line-height</span>: <span class="number">45px</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="selector-class">.b2</span> &#123;</span><br><span class="line">        <span class="attribute">width</span>: <span class="number">40px</span>;</span><br><span class="line">        <span class="attribute">height</span>: <span class="number">40px</span>;</span><br><span class="line">        <span class="attribute">line-height</span>: <span class="number">40px</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="selector-class">.b3</span> &#123;</span><br><span class="line">        <span class="attribute">width</span>: <span class="number">35px</span>;</span><br><span class="line">        <span class="attribute">height</span>: <span class="number">35px</span>;</span><br><span class="line">        <span class="attribute">line-height</span>: <span class="number">35px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></div><h3 id="创建js文件"><a href="#创建js文件" class="headerlink" title="创建js文件"></a>创建js文件</h3><p>在<code>themes\sakura\layout\source\js</code>文件夹下新建一个<code>bubble.js</code>文件，添加以下代码：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="JS"><figure class="iseeu highlight /js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">* 3d标签云</span></span><br><span class="line"><span class="comment">* 功能：鼠标移入标签，当前标签静止放大</span></span><br><span class="line"><span class="comment">* 说明：</span></span><br><span class="line"><span class="comment">* */</span></span><br><span class="line"><span class="built_in">window</span>.tagcloud = (<span class="function"><span class="keyword">function</span>(<span class="params">win, doc</span>) </span>&#123; <span class="comment">// ns</span></span><br><span class="line">    <span class="comment">// 判断对象</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">isObject</span> (<span class="params">obj</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="built_in">Object</span>.prototype.toString.call(obj) === <span class="string">'[object Object]'</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 构造函数</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">TagCloud</span> (<span class="params">options</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> self = <span class="keyword">this</span>;</span><br><span class="line"></span><br><span class="line">        self.config = TagCloud._getConfig(options);</span><br><span class="line">        self.box = self.config.element;  <span class="comment">//组件元素</span></span><br><span class="line">        self.fontsize = self.config.fontsize; <span class="comment">//平均字体大小</span></span><br><span class="line">        self.radius = self.config.radius; <span class="comment">//滚动半径</span></span><br><span class="line">        self.depth = <span class="number">2</span> * self.radius;   <span class="comment">//滚动深度</span></span><br><span class="line">        self.size = <span class="number">2</span> * self.radius;    <span class="comment">//随鼠标滚动变速作用区域</span></span><br><span class="line"></span><br><span class="line">        self.mspeed = TagCloud._getMsSpeed(self.config.mspeed);</span><br><span class="line">        self.ispeed = TagCloud._getIsSpeed(self.config.ispeed);</span><br><span class="line">        self.items = self._getItems();</span><br><span class="line"></span><br><span class="line">        self.direction = self.config.direction;   <span class="comment">//初始滚动方向</span></span><br><span class="line">        self.keep = self.config.keep; <span class="comment">//鼠标移出后是否保持之前滚动</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">//初始化</span></span><br><span class="line">        self.active = <span class="literal">false</span>;   <span class="comment">//是否为激活状态</span></span><br><span class="line">        self.lasta = <span class="number">1</span>;</span><br><span class="line">        self.lastb = <span class="number">1</span>;</span><br><span class="line">        self.mouseX0 = self.ispeed * <span class="built_in">Math</span>.sin(self.direction * <span class="built_in">Math</span>.PI / <span class="number">180</span>);    <span class="comment">//鼠标与滚动圆心x轴初始距离</span></span><br><span class="line">        self.mouseY0 = -self.ispeed * <span class="built_in">Math</span>.cos(self.direction * <span class="built_in">Math</span>.PI / <span class="number">180</span>);   <span class="comment">//鼠标与滚动圆心y轴初始距离</span></span><br><span class="line">        self.mouseX = self.mouseX0;   <span class="comment">//鼠标与滚动圆心x轴距离</span></span><br><span class="line">        self.mouseY = self.mouseY0;   <span class="comment">//鼠标与滚动圆心y轴距离</span></span><br><span class="line">        self.index = <span class="number">-1</span>;</span><br><span class="line"></span><br><span class="line">        <span class="comment">//鼠标移入</span></span><br><span class="line">        TagCloud._on(self.box, <span class="string">'mouseover'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            self.active = <span class="literal">true</span>;</span><br><span class="line">        &#125;);</span><br><span class="line">        <span class="comment">//鼠标移出</span></span><br><span class="line">        TagCloud._on(self.box, <span class="string">'mouseout'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            self.active = <span class="literal">false</span>;</span><br><span class="line">        &#125;);</span><br><span class="line"></span><br><span class="line">        <span class="comment">//鼠标在内移动</span></span><br><span class="line">        TagCloud._on(self.keep ? win : self.box, <span class="string">'mousemove'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">ev</span>) </span>&#123;</span><br><span class="line">            <span class="keyword">var</span> oEvent = win.event || ev;</span><br><span class="line">            <span class="keyword">var</span> boxPosition = self.box.getBoundingClientRect();</span><br><span class="line">            self.mouseX = (oEvent.clientX - (boxPosition.left + self.box.offsetWidth / <span class="number">2</span>)) / <span class="number">5</span>;</span><br><span class="line">            self.mouseY = (oEvent.clientY - (boxPosition.top + self.box.offsetHeight / <span class="number">2</span>)) / <span class="number">5</span>;</span><br><span class="line">        &#125;);</span><br><span class="line"></span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">var</span> j = <span class="number">0</span>, len = self.items.length; j &lt; len; j++) &#123;</span><br><span class="line">            self.items[j].element.index=j;</span><br><span class="line"></span><br><span class="line">            <span class="comment">//鼠标移出子元素,当前元素静止放大</span></span><br><span class="line">            self.items[j].element.onmouseover = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                self.index = <span class="keyword">this</span>.index;</span><br><span class="line">            &#125;;</span><br><span class="line"></span><br><span class="line">            <span class="comment">//鼠标移出子元素,当前元素继续滚动</span></span><br><span class="line">            self.items[j].element.onmouseout = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                self.index = <span class="number">-1</span>;</span><br><span class="line">            &#125;;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="comment">//定时更新</span></span><br><span class="line">        TagCloud.boxs.push(self.box);</span><br><span class="line">        self.update(self);    <span class="comment">//初始更新</span></span><br><span class="line">        self.box.style.visibility = <span class="string">"visible"</span>;</span><br><span class="line">        self.box.style.position = <span class="string">"relative"</span>;</span><br><span class="line">        <span class="comment">// self.box.style.minHeight = 1.2 * self.size + "px";</span></span><br><span class="line">        <span class="comment">// self.box.style.minWidth = 2.5 * self.size + "px";</span></span><br><span class="line">        self.box.style.minHeight = <span class="number">0</span> * self.size + <span class="string">"px"</span>;</span><br><span class="line">        self.box.style.minWidth = <span class="number">0</span> * self.size + <span class="string">"px"</span>;</span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">var</span> j = <span class="number">0</span>, len = self.items.length; j &lt; len; j++) &#123;</span><br><span class="line">            self.items[j].element.style.position = <span class="string">"absolute"</span>;</span><br><span class="line">            self.items[j].element.style.zIndex = j + <span class="number">1</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        self.up = setInterval(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">            self.update(self);</span><br><span class="line">        &#125;, <span class="number">10</span>);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//实例</span></span><br><span class="line">    TagCloud.boxs = []; <span class="comment">//实例元素数组</span></span><br><span class="line">    <span class="comment">// 静态方法们</span></span><br><span class="line">    TagCloud._set = <span class="function"><span class="keyword">function</span> (<span class="params">element</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">if</span> (TagCloud.boxs.indexOf(element) == <span class="number">-1</span>) &#123;<span class="comment">//ie8不支持数组的indexOf方法</span></span><br><span class="line">            <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//添加数组IndexOf方法</span></span><br><span class="line">    <span class="keyword">if</span> (!<span class="built_in">Array</span>.prototype.indexOf)&#123;</span><br><span class="line">        <span class="built_in">Array</span>.prototype.indexOf = <span class="function"><span class="keyword">function</span>(<span class="params">elt <span class="regexp">/*, from*/</span></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">var</span> len = <span class="keyword">this</span>.length &gt;&gt;&gt; <span class="number">0</span>;</span><br><span class="line">            <span class="keyword">var</span> <span class="keyword">from</span> = <span class="built_in">Number</span>(<span class="built_in">arguments</span>[<span class="number">1</span>]) || <span class="number">0</span>;</span><br><span class="line">            <span class="keyword">from</span> = (<span class="keyword">from</span> &lt; <span class="number">0</span>)</span><br><span class="line">                ? <span class="built_in">Math</span>.ceil(<span class="keyword">from</span>)</span><br><span class="line">                : <span class="built_in">Math</span>.floor(<span class="keyword">from</span>);</span><br><span class="line">            <span class="keyword">if</span> (<span class="keyword">from</span> &lt; <span class="number">0</span>)</span><br><span class="line">                <span class="keyword">from</span> += len;</span><br><span class="line"></span><br><span class="line">            <span class="keyword">for</span> (; <span class="keyword">from</span> &lt; len; <span class="keyword">from</span>++)&#123;</span><br><span class="line">                <span class="keyword">if</span> (<span class="keyword">from</span> <span class="keyword">in</span> <span class="keyword">this</span> &amp;&amp; <span class="keyword">this</span>[<span class="keyword">from</span>] === elt)</span><br><span class="line">                    <span class="keyword">return</span> <span class="keyword">from</span>;</span><br><span class="line">            &#125;</span><br><span class="line">            <span class="keyword">return</span> <span class="number">-1</span>;</span><br><span class="line">        &#125;;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    TagCloud._getConfig = <span class="function"><span class="keyword">function</span> (<span class="params">config</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> defaultConfig = &#123;   <span class="comment">//默认值</span></span><br><span class="line">            fontsize: <span class="number">16</span>,       <span class="comment">//基本字体大小, 单位px</span></span><br><span class="line">            radius: <span class="number">60</span>,         <span class="comment">//滚动半径, 单位px</span></span><br><span class="line">            mspeed: <span class="string">"normal"</span>,   <span class="comment">//滚动最大速度, 取值: slow, normal(默认), fast</span></span><br><span class="line">            ispeed: <span class="string">"normal"</span>,   <span class="comment">//滚动初速度, 取值: slow, normal(默认), fast</span></span><br><span class="line">            direction: <span class="number">135</span>,     <span class="comment">//初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...</span></span><br><span class="line">            keep: <span class="literal">true</span>          <span class="comment">//鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动</span></span><br><span class="line">        &#125;;</span><br><span class="line"></span><br><span class="line">        <span class="keyword">if</span>(isObject(config)) &#123;</span><br><span class="line">            <span class="keyword">for</span>(<span class="keyword">var</span> i <span class="keyword">in</span> config) &#123;</span><br><span class="line">                <span class="keyword">if</span>(config.hasOwnProperty(i)) &#123;<span class="comment">//hasOwnProperty()用来判断一个属性是定义在对象本身而不是继承自原型链</span></span><br><span class="line">                    defaultConfig[i] = config[i]; <span class="comment">//用户配置</span></span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="keyword">return</span> defaultConfig;<span class="comment">// 配置 Merge</span></span><br><span class="line">    &#125;;</span><br><span class="line">    TagCloud._getMsSpeed = <span class="function"><span class="keyword">function</span> (<span class="params">mspeed</span>) </span>&#123;    <span class="comment">//滚动最大速度</span></span><br><span class="line">        <span class="keyword">var</span> speedMap = &#123;</span><br><span class="line">            slow: <span class="number">1.5</span>, </span><br><span class="line">            normal: <span class="number">3</span>,</span><br><span class="line">            fast: <span class="number">5</span></span><br><span class="line">        &#125;;</span><br><span class="line">        <span class="keyword">return</span> speedMap[mspeed] || <span class="number">3</span>;</span><br><span class="line">    &#125;;</span><br><span class="line">    TagCloud._getIsSpeed = <span class="function"><span class="keyword">function</span> (<span class="params">ispeed</span>) </span>&#123;    <span class="comment">//滚动初速度</span></span><br><span class="line">        <span class="keyword">var</span> speedMap = &#123;</span><br><span class="line">            slow: <span class="number">10</span>,</span><br><span class="line">            normal: <span class="number">25</span>,</span><br><span class="line">            fast: <span class="number">50</span></span><br><span class="line">        &#125;;</span><br><span class="line">        <span class="keyword">return</span> speedMap[ispeed] || <span class="number">25</span>;</span><br><span class="line">    &#125;;</span><br><span class="line">    TagCloud._getSc = <span class="function"><span class="keyword">function</span>(<span class="params">a, b</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> l = <span class="built_in">Math</span>.PI / <span class="number">180</span>;</span><br><span class="line">        <span class="comment">//数组顺序0,1,2,3表示asin,acos,bsin,bcos</span></span><br><span class="line">        <span class="keyword">return</span> [</span><br><span class="line">            <span class="built_in">Math</span>.sin(a * l),</span><br><span class="line">            <span class="built_in">Math</span>.cos(a * l),</span><br><span class="line">            <span class="built_in">Math</span>.sin(b * l),</span><br><span class="line">            <span class="built_in">Math</span>.cos(b * l)</span><br><span class="line">        ];</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    TagCloud._on = <span class="function"><span class="keyword">function</span> (<span class="params">ele, eve, handler, cap</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">if</span> (ele.addEventListener) &#123;</span><br><span class="line">            ele.addEventListener(eve, handler, cap);</span><br><span class="line">        &#125; <span class="keyword">else</span> <span class="keyword">if</span> (ele.attachEvent) &#123;</span><br><span class="line">            ele.attachEvent(<span class="string">'on'</span> + eve, handler);</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            ele[<span class="string">'on'</span> + eve] = handler;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 原型方法</span></span><br><span class="line">    TagCloud.prototype = &#123;</span><br><span class="line">        <span class="keyword">constructor</span>: TagCloud, // 反向引用构造器</span><br><span class="line"></span><br><span class="line">        update: function () &#123;</span><br><span class="line">            <span class="keyword">var</span> self = <span class="keyword">this</span>, a, b;</span><br><span class="line"></span><br><span class="line">            <span class="keyword">if</span> (!self.active &amp;&amp; !self.keep) &#123;</span><br><span class="line">                self.mouseX = <span class="built_in">Math</span>.abs(self.mouseX - self.mouseX0) &lt; <span class="number">1</span> ? self.mouseX0 : (self.mouseX + self.mouseX0) / <span class="number">2</span>;   <span class="comment">//重置鼠标与滚动圆心x轴距离</span></span><br><span class="line">                self.mouseY = <span class="built_in">Math</span>.abs(self.mouseY - self.mouseY0) &lt; <span class="number">1</span> ? self.mouseY0 : (self.mouseY + self.mouseY0) / <span class="number">2</span>;   <span class="comment">//重置鼠标与滚动圆心y轴距离</span></span><br><span class="line">            &#125;</span><br><span class="line"></span><br><span class="line">            a = -(<span class="built_in">Math</span>.min(<span class="built_in">Math</span>.max(-self.mouseY, -self.size), self.size) / self.radius ) * self.mspeed;</span><br><span class="line">            b = (<span class="built_in">Math</span>.min(<span class="built_in">Math</span>.max(-self.mouseX, -self.size), self.size) / self.radius ) * self.mspeed;</span><br><span class="line">            </span><br><span class="line">            <span class="keyword">if</span> (<span class="built_in">Math</span>.abs(a) &lt;= <span class="number">0.01</span> &amp;&amp; <span class="built_in">Math</span>.abs(b) &lt;= <span class="number">0.01</span>) &#123; <span class="keyword">return</span>; &#125;</span><br><span class="line"></span><br><span class="line">            self.lasta = a;</span><br><span class="line">            self.lastb = b;</span><br><span class="line"></span><br><span class="line">            <span class="keyword">var</span> sc = TagCloud._getSc(a, b);</span><br><span class="line"></span><br><span class="line">            <span class="keyword">for</span> (<span class="keyword">var</span> j = <span class="number">0</span>, len = self.items.length; j &lt; len; j++) &#123;</span><br><span class="line"></span><br><span class="line">                <span class="keyword">var</span> rx1 = self.items[j].x,</span><br><span class="line">                    ry1 = self.items[j].y*sc[<span class="number">1</span>] + self.items[j].z*(-sc[<span class="number">0</span>]),</span><br><span class="line">                    rz1 = self.items[j].y*sc[<span class="number">0</span>] + self.items[j].z*sc[<span class="number">1</span>];</span><br><span class="line"></span><br><span class="line">                <span class="keyword">var</span> rx2 = rx1 * sc[<span class="number">3</span>] + rz1 * sc[<span class="number">2</span>],</span><br><span class="line">                    ry2 = ry1,</span><br><span class="line">                    rz2 = rz1 * sc[<span class="number">3</span>] - rx1 * sc[<span class="number">2</span>];</span><br><span class="line"></span><br><span class="line">                <span class="keyword">if</span>(self.index==j)&#123;</span><br><span class="line"></span><br><span class="line">                    self.items[j].scale = <span class="number">1</span>; <span class="comment">//取值范围0.6 ~ 3</span></span><br><span class="line">                    self.items[j].fontsize = <span class="number">16</span>;</span><br><span class="line">                    self.items[j].alpha = <span class="number">1</span>;</span><br><span class="line">                    self.items[j].element.style.zIndex = <span class="number">99</span>;</span><br><span class="line">                &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">                    <span class="keyword">var</span> per = self.depth / (self.depth + rz2);</span><br><span class="line">                    self.items[j].x = rx2;</span><br><span class="line">                    self.items[j].y = ry2;</span><br><span class="line">                    self.items[j].z = rz2;</span><br><span class="line"></span><br><span class="line">                    self.items[j].scale = per; <span class="comment">//取值范围0.6 ~ 3</span></span><br><span class="line">                    self.items[j].fontsize = <span class="built_in">Math</span>.ceil(per * <span class="number">2</span>) + self.fontsize - <span class="number">6</span>;</span><br><span class="line">                    self.items[j].alpha = <span class="number">1.5</span> * per - <span class="number">0.5</span>;</span><br><span class="line">                    self.items[j].element.style.zIndex = <span class="built_in">Math</span>.ceil(per*<span class="number">10</span><span class="number">-5</span>);</span><br><span class="line">                &#125;</span><br><span class="line">                <span class="comment">//self.items[j].element.style.fontSize = self.items[j].fontsize + "px";//字体变大小</span></span><br><span class="line">                self.items[j].element.style.left = self.items[j].x + (self.box.offsetWidth - self.items[j].offsetWidth) / <span class="number">2</span> + <span class="string">"px"</span>;</span><br><span class="line">                self.items[j].element.style.top = self.items[j].y + (self.box.offsetHeight - self.items[j].offsetHeight) / <span class="number">2</span> + <span class="string">"px"</span>;</span><br><span class="line">                self.items[j].element.style.filter = <span class="string">"alpha(opacity="</span> + <span class="number">100</span> * self.items[j].alpha + <span class="string">")"</span>;</span><br><span class="line">                self.items[j].element.style.opacity = self.items[j].alpha;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line"></span><br><span class="line">        _getItems: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="keyword">var</span> self = <span class="keyword">this</span>,</span><br><span class="line">                items = [],</span><br><span class="line">                element = self.box.children, <span class="comment">// children 全部是Element</span></span><br><span class="line">                length = element.length,</span><br><span class="line">                item;</span><br><span class="line"></span><br><span class="line">            <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; length; i++) &#123;</span><br><span class="line">                item = &#123;&#125;;</span><br><span class="line">                item.angle = &#123;&#125;;</span><br><span class="line">                item.angle.phi = <span class="built_in">Math</span>.acos(<span class="number">-1</span> + (<span class="number">2</span> * i + <span class="number">1</span>) / length);</span><br><span class="line">                item.angle.theta = <span class="built_in">Math</span>.sqrt((length + <span class="number">1</span>) * <span class="built_in">Math</span>.PI) * item.angle.phi;</span><br><span class="line">                item.element = element[i];</span><br><span class="line">                item.offsetWidth = item.element.offsetWidth;</span><br><span class="line">                item.offsetHeight = item.element.offsetHeight;</span><br><span class="line">                item.x = self.radius * <span class="number">1.5</span> * <span class="built_in">Math</span>.cos(item.angle.theta) * <span class="built_in">Math</span>.sin(item.angle.phi);</span><br><span class="line">                item.y = self.radius * <span class="number">1.5</span> * <span class="built_in">Math</span>.sin(item.angle.theta) * <span class="built_in">Math</span>.sin(item.angle.phi);</span><br><span class="line">                item.z = self.radius * <span class="number">1.5</span> * <span class="built_in">Math</span>.cos(item.angle.phi);</span><br><span class="line">                item.element.style.left = item.x + (self.box.offsetWidth - item.offsetWidth) / <span class="number">2</span> + <span class="string">"px"</span>;</span><br><span class="line">                item.element.style.top = item.y + (self.box.offsetHeight - item.offsetHeight) / <span class="number">2</span> + <span class="string">"px"</span>;</span><br><span class="line">                items.push(item);</span><br><span class="line">            &#125;</span><br><span class="line"></span><br><span class="line">            <span class="keyword">return</span> items;   <span class="comment">//单元素数组</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (!doc.querySelectorAll) &#123;<span class="comment">//ie7不支持querySelectorAll，所以要重新定义</span></span><br><span class="line">        doc.querySelectorAll = <span class="function"><span class="keyword">function</span> (<span class="params">selectors</span>) </span>&#123;</span><br><span class="line">            <span class="keyword">var</span> style = doc.createElement(<span class="string">'style'</span>), elements = [], element;</span><br><span class="line">            doc.documentElement.firstChild.appendChild(style);</span><br><span class="line">            doc._qsa = [];</span><br><span class="line"></span><br><span class="line">            style.styleSheet.cssText = selectors + <span class="string">'&#123;x-qsa:expression(document._qsa &amp;&amp; document._qsa.push(this))&#125;'</span>;</span><br><span class="line">            <span class="built_in">window</span>.scrollBy(<span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">            style.parentNode.removeChild(style);</span><br><span class="line"></span><br><span class="line">            <span class="keyword">while</span> (doc._qsa.length) &#123;</span><br><span class="line">                element = doc._qsa.shift();</span><br><span class="line">                element.style.removeAttribute(<span class="string">'x-qsa'</span>);</span><br><span class="line">                elements.push(element);</span><br><span class="line">            &#125;</span><br><span class="line">            doc._qsa = <span class="literal">null</span>;</span><br><span class="line">            <span class="keyword">return</span> elements;</span><br><span class="line">        &#125;;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params">options</span>) </span>&#123; <span class="comment">// factory</span></span><br><span class="line">        options = options || &#123;&#125;; <span class="comment">// 短路语法</span></span><br><span class="line">        <span class="keyword">var</span> selector = options.selector || <span class="string">'.tagcloud'</span>, <span class="comment">//默认选择class为tagcloud的元素</span></span><br><span class="line">            elements = doc.querySelectorAll(selector),</span><br><span class="line">            instance = [];</span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">var</span> index = <span class="number">0</span>, len = elements.length; index &lt; len; index++) &#123;</span><br><span class="line">            options.element = elements[index];</span><br><span class="line">            <span class="keyword">if</span> (!!TagCloud._set(options.element)) &#123;</span><br><span class="line">                instance.push(<span class="keyword">new</span> TagCloud(options));</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span> instance;</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">&#125;)(<span class="built_in">window</span>, <span class="built_in">document</span>);</span><br></pre></td></tr></table></figure></div><h3 id="引入tag-bubble-css和bubble-js"><a href="#引入tag-bubble-css和bubble-js" class="headerlink" title="引入tag-bubble.css和bubble.js"></a>引入<code>tag-bubble.css</code>和<code>bubble.js</code></h3><p><code>bubble.js</code>在<code>tags-bubble.ejs</code>的第一行引入了，不需要再次引入</p><p>引入<code>tag-bubble.css</code>，在<code>themes\sakura\layout\_partial\head.ejs</code>中添加：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="HTML"><figure class="iseeu highlight /html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 球形标签 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"/css/tag-bubble.css"</span>&gt;</span></span><br></pre></td></tr></table></figure></div><p>大约在第40行左右：</p><p><img src="https://cdn.jsdelivr.net/gh/1999cyx/cdn@1.0/images/loading.gif" data-original="https://cdn.jsdelivr.net/gh/1999cyx/images/img/20200425214821.png" alt=""></p><h3 id="效果"><a href="#效果" class="headerlink" title="效果"></a>效果</h3><p><a href="https://chenyunxin.cn/tags/" target="_blank" class="LinkCard">标签云</a></p><h1 id="三、分类页面"><a href="#三、分类页面" class="headerlink" title="三、分类页面"></a>三、分类页面</h1><h2 id="1-分类页面资源文件"><a href="#1-分类页面资源文件" class="headerlink" title="1. 分类页面资源文件"></a>1. 分类页面资源文件</h2><ol><li><p>首先要新建一个categories页面</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="PLAIN"><figure class="iseeu highlight /plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo new page categories</span><br></pre></td></tr></table></figure></div></li><li><p>编辑tags页面</p><p>打开站点文件夹下的<code>source\categories\index.md</code>，添加：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="DIFF"><figure class="iseeu highlight /diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">---</span></span><br><span class="line">title: categories</span><br><span class="line"><span class="addition">+ layout: categories-love</span></span><br><span class="line">date: 2020-4-25 22:14:16</span><br><span class="line"><span class="comment">---</span></span><br></pre></td></tr></table></figure></div></li><li><p>在主题的<code>_config.yml</code>中添加：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="YML"><figure class="iseeu highlight /yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">分类:</span> <span class="string">&#123;path:</span> <span class="string">/categories,</span> <span class="attr">fa:</span> <span class="string">fa-th-list</span> <span class="string">faa-bounce</span> <span class="string">&#125;,</span></span><br></pre></td></tr></table></figure></div></li></ol><h2 id="2-创建样式文件-1"><a href="#2-创建样式文件-1" class="headerlink" title="2. 创建样式文件"></a>2. 创建样式文件</h2><h3 id="标签页面-1"><a href="#标签页面-1" class="headerlink" title="标签页面"></a>标签页面</h3><p>在<code>themes\sakura\layout</code>文件夹下新建<code>categories-love.ejs</code>文件，添加以下代码：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="HTML"><figure class="iseeu highlight /html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"blank"</span> <span class="attr">style</span>=<span class="string">"padding-top: 75px;"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"content"</span> <span class="attr">class</span>=<span class="string">"site-content"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"main"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">header</span> <span class="attr">class</span>=<span class="string">"page-header"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">h1</span> <span class="attr">class</span>=<span class="string">"cat-title"</span>&gt;</span></span><br><span class="line">                分类<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"cat-des"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">%-</span> "<span class="attr">Categories</span> " + <span class="attr">site.categories.length</span> %&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">header</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"main-part"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"category-all-page"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"category-all"</span> <span class="attr">hidden</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">%-</span> <span class="attr">tagcloud</span>(&#123;</span></span><br><span class="line"><span class="tag">                      <span class="attr">min_font:</span> <span class="attr">15</span>,</span></span><br><span class="line"><span class="tag">                      <span class="attr">max_font:</span> <span class="attr">30</span>,</span></span><br><span class="line"><span class="tag">                      <span class="attr">amount:</span> <span class="attr">200</span>,</span></span><br><span class="line"><span class="tag">                      <span class="attr">color:</span> <span class="attr">true</span>,</span></span><br><span class="line"><span class="tag">                      <span class="attr">start_color:</span> '#<span class="attr">ff6666</span>',</span></span><br><span class="line"><span class="tag">                      <span class="attr">end_color:</span> '#<span class="attr">0099cc</span>'</span></span><br><span class="line"><span class="tag">                      &#125;) %&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"categorylove"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">            <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span></span><br><span class="line"><span class="javascript">                <span class="keyword">var</span> categories = <span class="built_in">document</span>.getElementsByClassName(<span class="string">'category-all'</span>);</span></span><br><span class="line"><span class="actionscript">                <span class="comment">//var categories = document.querySelector('.category-all');</span></span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">                <span class="comment">//隐藏category-all这个div</span></span></span><br><span class="line"><span class="actionscript">                categories[<span class="number">0</span>].setAttribute(<span class="string">"hidden"</span>, <span class="string">"hidden"</span>);</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">                <span class="keyword">var</span> category = categories[<span class="number">0</span>].getElementsByTagName(<span class="string">'a'</span>);</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">                <span class="keyword">var</span> words = [<span class="string">'❤️'</span>];</span></span><br><span class="line"><span class="actionscript">                <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; category.length; i++) &#123;</span></span><br><span class="line"><span class="actionscript">                    <span class="comment">// words.push(category[i].innerHTML)</span></span></span><br><span class="line">                    words.push(category[i]);</span><br><span class="line"><span class="actionscript">                    words.push(<span class="string">'♠'</span>);</span></span><br><span class="line">                &#125;</span><br><span class="line"><span class="actionscript">                <span class="comment">// words.push('💕');</span></span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">                <span class="keyword">var</span> dom = &#123;</span></span><br><span class="line"><span class="javascript">                    love: <span class="built_in">document</span>.querySelector(<span class="string">'.categorylove'</span>)</span></span><br><span class="line">                &#125;</span><br><span class="line"></span><br><span class="line"><span class="actionscript">                dom.love.style.setProperty(<span class="string">'--particles'</span>, words.length)</span></span><br><span class="line"></span><br><span class="line"><span class="javascript">                words.forEach(<span class="function">(<span class="params">word, i</span>) =&gt;</span> &#123;</span></span><br><span class="line"></span><br><span class="line"><span class="javascript">                    <span class="keyword">let</span> atag = <span class="built_in">document</span>.createElement(<span class="string">'a'</span>);</span></span><br><span class="line"><span class="actionscript">                    atag.style.setProperty(<span class="string">'--n'</span>, i + <span class="number">1</span>);</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">                    atag.style.setProperty(<span class="string">'text-decoration'</span>, <span class="string">'none'</span>);</span></span><br><span class="line"><span class="actionscript">                    atag.style.setProperty(<span class="string">'border-bottom'</span>, <span class="string">'none'</span>);</span></span><br><span class="line"></span><br><span class="line"><span class="javascript">                    <span class="keyword">var</span> r = <span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random() * <span class="number">75</span> + <span class="number">130</span>);</span></span><br><span class="line"><span class="javascript">                    <span class="keyword">var</span> g = <span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random() * <span class="number">75</span> + <span class="number">100</span>);</span></span><br><span class="line"><span class="javascript">                    <span class="keyword">var</span> b = <span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random() * <span class="number">75</span> + <span class="number">80</span>);</span></span><br><span class="line"><span class="actionscript">                    atag.style.setProperty(<span class="string">"color"</span>, <span class="string">"rgb("</span> + r + <span class="string">","</span> + g + <span class="string">","</span> + b + <span class="string">")"</span>);</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">                    atag.setAttribute(<span class="string">"href"</span>, word.href);</span></span><br><span class="line">                    atag.innerText = word.innerText;</span><br><span class="line"></span><br><span class="line"><span class="actionscript">                    <span class="keyword">if</span> (word.href == <span class="literal">undefined</span>) &#123;</span></span><br><span class="line"><span class="actionscript">                        atag.setAttribute(<span class="string">"href"</span>, <span class="string">"#"</span>);</span></span><br><span class="line">                        atag.innerText = word;</span><br><span class="line">                    &#125;</span><br><span class="line"></span><br><span class="line">                    dom.love.appendChild(atag);</span><br><span class="line">                &#125;)</span><br><span class="line">            <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure></div><h3 id="创建样式文件-1"><a href="#创建样式文件-1" class="headerlink" title="创建样式文件"></a>创建样式文件</h3><p>在<code>themes\sakura\layout\source\css</code>文件夹下新建一个<code>categories-love.css</code>文件，添加以下代码：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="CSS"><figure class="iseeu highlight /css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.categorylove</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">500px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">650px</span>;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">60px</span> auto</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.categorylove</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">font-family</span>: sans-serif;</span><br><span class="line">    <span class="attribute">text-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">1em</span> <span class="number">#fff</span>;</span><br><span class="line">    <span class="attribute">animation</span>: x-move <span class="number">10s</span> ease-in-out infinite alternate, y-move <span class="number">20s</span> linear infinite;</span><br><span class="line">    <span class="attribute">animation-delay</span>: <span class="built_in">calc</span>(<span class="number">30s</span> / var(--particles) * <span class="built_in">var</span>(--n) * -<span class="number">1</span>);</span><br><span class="line">    <span class="attribute">user-select</span>: auto</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.categorylove</span> <span class="selector-tag">a</span><span class="selector-pseudo">:first-child</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#ff4500</span>;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">3em</span>;</span><br><span class="line">    <span class="attribute">text-shadow</span>: <span class="number">0</span> <span class="number">0</span> .<span class="number">1em</span> <span class="number">#000</span>, <span class="number">0</span> <span class="number">0</span> <span class="number">1em</span> <span class="number">#fff</span>;</span><br><span class="line">    <span class="attribute">z-index</span>: <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@keyframes</span> x-move &#123;</span><br><span class="line">    <span class="selector-tag">to</span> &#123;</span><br><span class="line">        <span class="attribute">left</span>: <span class="number">450px</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@keyframes</span> y-move &#123;</span><br><span class="line">    0% &#123;</span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="number">180px</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    10% &#123;</span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="number">45px</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    15% &#123;</span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="number">5px</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    18% &#123;</span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="number">0</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    20% &#123;</span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="number">5px</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    22% &#123;</span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="number">35px</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    24% &#123;</span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="number">65px</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    25% &#123;</span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="number">110px</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    26% &#123;</span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="number">65px</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    28% &#123;</span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="number">35px</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    30% &#123;</span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="number">5px</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    32% &#123;</span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="number">0</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    35% &#123;</span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="number">5px</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    40% &#123;</span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="number">45px</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    50% &#123;</span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="number">180px</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    71% &#123;</span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="number">430px</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    72<span class="selector-class">.5</span>% &#123;</span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="number">440px</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    75% &#123;</span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="number">450px</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    77<span class="selector-class">.5</span>% &#123;</span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="number">440px</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    79% &#123;</span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="number">430px</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    100% &#123;</span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="number">180px</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">max-width:</span><span class="number">767px</span>) &#123;</span><br><span class="line">    <span class="selector-class">.categorylove</span> &#123;</span><br><span class="line">        <span class="attribute">width</span>: <span class="number">360px</span>;</span><br><span class="line">        <span class="attribute">height</span>: <span class="number">450px</span>;</span><br><span class="line">        <span class="attribute">margin</span>: <span class="number">30px</span> auto</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">@keyframes</span> x-move &#123;</span><br><span class="line">        <span class="selector-tag">to</span> &#123;</span><br><span class="line">            <span class="attribute">left</span>: <span class="number">285px</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></div><h3 id="引入categories-love-css"><a href="#引入categories-love-css" class="headerlink" title="引入categories-love.css"></a>引入categories-love.css</h3><p>在<code>themes\sakura\layout\_partial\head.ejs</code>中添加：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="HTML"><figure class="iseeu highlight /html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 心形分类页面 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"/css/categories-love.css"</span>&gt;</span></span><br></pre></td></tr></table></figure></div><p>大约在第40行左右（标签页面引入的<code>tag-bubble.css</code>下方）：</p><p><img src="https://cdn.jsdelivr.net/gh/1999cyx/cdn@1.0/images/loading.gif" data-original="https://cdn.jsdelivr.net/gh/1999cyx/images/img/20200425220020.png" alt=""></p><h3 id="效果-1"><a href="#效果-1" class="headerlink" title="效果"></a>效果</h3><p><a href="https://chenyunxin.cn/categories/" target="_blank" class="LinkCard">分类</a></p><h1 id="四、参考文章"><a href="#四、参考文章" class="headerlink" title="四、参考文章"></a>四、参考文章</h1><blockquote><p>标签云参数配置：<a href="https://blog.csdn.net/cungudafa/article/details/104616500?ops_request_misc=%7B%22request%5Fid%22%3A%22158781827919724835820975%22%2C%22scm%22%3A%2220140713.130102334.pc%5Fblog.%22%7D&request_id=158781827919724835820975&biz_id=0&utm_source=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_v25-1" target="_blank" rel="noopener">Hexo（sakura）自定义标签云</a></p><p>标签和分类页面美化样式（一篇hexo+next的标签云美化）：<a href="https://www.liaofuzhan.com/posts/4158923031.html" target="_blank" rel="noopener">Hexo Next主题之自定义标签页</a></p></blockquote><p>欢迎大家评论区交流，一起交就学习<img src="https://cdn.jsdelivr.net/gh/1999cyx/cdn@1.0/images/loading.gif" data-original="https://cdn.jsdelivr.net/gh/1999cyx/images/img/20200420231401.jpeg" style="zoom:33%"></p></div><div class="popular-posts-header"><i class="fa fa-graduation-cap"></i> 相关文章</div><details><summary>点击查看</summary><ul class="popular-posts"><li class="popular-posts-item"><div class="popular-posts-title"><a href="\posts\4200755795.html" rel="bookmark">hexo(next)——每日一言、今日诗词</a></div></li><li class="popular-posts-item"><div class="popular-posts-title"><a href="\posts\1151675629.html" rel="bookmark">JS鼠标移动特效</a></div></li><li class="popular-posts-item"><div class="popular-posts-title"><a href="\posts\733465971.html" rel="bookmark">JS樱花特效</a></div></li><li class="popular-posts-item"><div class="popular-posts-title"><a href="\posts\1840195295.html" rel="bookmark">hexo+github搭建个人博客</a></div></li></ul></details><div></div><div><div><div class="read-over">-------------------本文结束 <i class="fa fa-paw"></i> 感谢您的阅读-------------------</div></div></div><div><div class="share_reward"><div>坚持原创技术分享，感谢您的支持和鼓励！</div><button id="rewardButton" disable="enable" onclick='var e=document.getElementById("QR");"none"===e.style.display?e.style.display="block":e.style.display="none"'><span>打赏</span></button><div id="QR" style="display:none"><div id="wechat" style="display:inline-block"><img id="wechat_qr" src="https://cdn.jsdelivr.net/gh/1999cyx/cdn@1.0/images/loading.gif" data-original="/images/wechatpay.jpg" alt="云开、见月明 微信支付"><p>微信支付</p></div><div id="alipay" style="display:inline-block"><img id="alipay_qr" src="https://cdn.jsdelivr.net/gh/1999cyx/cdn@1.0/images/loading.gif" data-original="/images/alipay.jpg" alt="云开、见月明 支付宝"><p>支付宝</p></div></div></div></div><footer class="post-footer"><div class="post-tags"><a href="/tags/hexo/" rel="tag"><i class="fa fa-tag"></i> hexo</a> <a href="/tags/%E7%BE%8E%E5%8C%96/" rel="tag"><i class="fa fa-tag"></i> 美化</a> <a href="/tags/sakura/" rel="tag"><i class="fa fa-tag"></i> sakura</a></div><div class="post-nav"><div class="post-nav-next post-nav-item"><a href="/posts/1779179582.html" rel="next" title="Github+PicGo配置私人图床踩坑记"><i class="fa fa-chevron-left"></i> Github+PicGo配置私人图床踩坑记</a></div><span class="post-nav-divider"></span><div class="post-nav-prev post-nav-item"></div></div></footer></div></article><div class="post-spread"><div data-weibo-title="分享到微博" data-qq-title="分享到QQ" data-douban-title="分享到豆瓣" class="social-share" class="share-component" data-disabled="qzone,google+,linkedin" data-description="Share.js - 一键分享到微博，QQ空间，腾讯微博，人人，豆瓣...">分享到：</div></div></div></div><div class="comments" id="comments"></div></div><div class="sidebar-toggle"><div class="sidebar-toggle-line-wrap"><span class="sidebar-toggle-line sidebar-toggle-line-first"></span> <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span> <span class="sidebar-toggle-line sidebar-toggle-line-last"></span></div></div><aside id="sidebar" class="sidebar"><div id="sidebar-dimmer"></div><div class="sidebar-inner"><ul class="sidebar-nav motion-element"><li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">文章目录</li><li class="sidebar-nav-overview" data-target="site-overview-wrap">站点概览</li></ul><section class="site-overview-wrap sidebar-panel"><div class="site-overview"><div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person"><a href="/"><img class="site-author-image" itemprop="image" src="https://cdn.jsdelivr.net/gh/1999cyx/cdn@1.0/images/cloudYun.jpg" alt="云开、见月明"></a><p class="site-author-name" itemprop="name">云开、见月明</p><p class="site-description motion-element" itemprop="description"></p></div><nav class="site-state motion-element"><div class="site-state-item site-state-posts"><a href="/archives"><span class="site-state-item-count">12</span> <span class="site-state-item-name">文章</span></a></div><div class="site-state-item site-state-categories"><a href="/categories/index.html"><span class="site-state-item-count">8</span> <span class="site-state-item-name">分类</span></a></div><div class="site-state-item site-state-tags"><a href="/tags/index.html"><span class="site-state-item-count">13</span> <span class="site-state-item-name">标签</span></a></div></nav><div class="feed-link motion-element"><a href="/atom.xml" rel="alternate"><i class="fa fa-rss"></i> RSS </a><a title="收藏到书签，偶尔High一下^_^" rel="alternate" class="mw-harlem_shake_slow wobble shake" href="javascript:void(0)" onclick="(    /*     * Copyright (C) 2015 Rocko (rocko.xyz) <rocko.zxp@gmail.com>     *     * Licensed under the Apache License, Version 2.0 (the 'License');     * you may not use this file except in compliance with the License.     * You may obtain a copy of the License at     *     *      http://www.apache.org/licenses/LICENSE-2.0     *     * Unless required by applicable law or agreed to in writing, software     * distributed under the License is distributed on an 'AS IS' BASIS,     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     * See the License for the specific language governing permissions and     * limitations under the License.     */    function go() {        function c() {        var e = document.createElement('link');        e.setAttribute('type', 'text/css');        e.setAttribute('rel', 'stylesheet');        e.setAttribute('href', f);        e.setAttribute('class', l);        document.body.appendChild(e)    }     function h() {        var e = document.getElementsByClassName(l);        for (var t = 0; t < e.length; t++) {            document.body.removeChild(e[t])        }    }     function p() {        var e = document.createElement('div');        e.setAttribute('class', a);        document.body.appendChild(e);        setTimeout(function() {            document.body.removeChild(e)        }, 100)    }     function d(e) {        return {            height : e.offsetHeight,            width : e.offsetWidth        }    }     function v(i) {        var s = d(i);        return s.height > e &amp;&amp; s.height < n &amp;&amp; s.width > t &amp;&amp; s.width < r    }     function m(e) {        var t = e;        var n = 0;        while (!!t) {            n += t.offsetTop;            t = t.offsetParent        }        return n    }     function g() {        var e = document.documentElement;        if (!!window.innerWidth) {            return window.innerHeight        } else if (e &amp;&amp; !isNaN(e.clientHeight)) {            return e.clientHeight        }        return 0    }     function y() {        if (window.pageYOffset) {            return window.pageYOffset        }        return Math.max(document.documentElement.scrollTop, document.body.scrollTop)    }     function E(e) {        var t = m(e);        return t >= w &amp;&amp; t <= b + w    }     var songs = [                'http://s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3', 'http://www.ytmp3.cn/down/57563.mp3'  ];    function S() {        var e = document.getElementById('audio_element_id');        if(e != null){            var index = parseInt(e.getAttribute('curSongIndex'));            if(index > songs.length - 2) {                index = 0;            } else {                index++;            }            e.setAttribute('curSongIndex', index);            N();        }        e.src = i;        e.play()    }     function x(e) {        e.className += ' ' + s + ' ' + o    }     function T(e) {        e.className += ' ' + s + ' ' + u[Math.floor(Math.random() * u.length)]    }     function N() {        var e = document.getElementsByClassName(s);        var t = new RegExp('\\b' + s + '\\b');        for (var n = 0; n < e.length; ) {            e[n].className = e[n].className.replace(t, '')        }    }    function initAudioEle() {        var e = document.getElementById('audio_element_id');        if(e === null){            e = document.createElement('audio');            e.setAttribute('class', l);            e.setAttribute('curSongIndex', 0);            e.id = 'audio_element_id';            e.loop = false;            e.bgcolor = 0;            e.addEventListener('canplay', function() {            setTimeout(function() {                x(k)            }, 500);            setTimeout(function() {                N();                p();                for (var e = 0; e < O.length; e++) {                    T(O[e])                }            }, 15500)        }, true);        e.addEventListener('ended', function() {            N();            h();            go();        }, true);        e.innerHTML = ' <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>';        document.body.appendChild(e);        }    }        initAudioEle();    var e = 30;    var t = 30;    var n = 350;    var r = 350;    var curSongIndex = parseInt(document.getElementById('audio_element_id').getAttribute('curSongIndex'));    var i = songs[curSongIndex];        var s = 'mw-harlem_shake_me';    var o = 'im_first';    var u = ['im_drunk', 'im_baked', 'im_trippin', 'im_blown'];    var a = 'mw-strobe_light';    var f = 'https://rocko.xyz/css/harlem-shake-style.css';        var l = 'mw_added_css';    var b = g();    var w = y();    var C = document.getElementsByTagName('*');    var k = null;    for (var L = 0; L < C.length; L++) {        var A = C[L];        if (v(A)) {            if (E(A)) {                k = A;                break            }        }    }    if (A === null) {        console.warn('Could not find a node of the right size. Please try a different page.');        return    }    c();    S();    var O = [];    for (var L = 0; L < C.length; L++) {        var A = C[L];        if (v(A)) {            O.push(A)        }    }    })()"><i class="fa fa-music"></i> High~</a></div><div class="links-of-author motion-element"><span class="links-of-author-item"><a rel="external nofollow" href="mailto:1755899681@qq.com" target="_blank" title="E-Mail"><i class="fa fa-fw fa-envelope"></i>E-Mail</a> </span><span class="links-of-author-item"><a rel="external nofollow" href="https://github.com/1999cyx" target="_blank" title="GitHub"><i class="fa fa-fw fa-github"></i>GitHub</a> </span><span class="links-of-author-item"><a rel="external nofollow" href="https://blog.csdn.net/qq_44036990" target="_blank" title="CSDN"><i class="fa fa-fw fa-copyright"></i>CSDN</a></span></div><div class="links-of-blogroll motion-element links-of-blogroll-block"><div class="links-of-blogroll-title"><i class="fa fa-history fa-" aria-hidden="true"></i> 近期文章</div><ul class="links-of-blogroll-list"><li class="my-links-of-blogroll-li"><a href="/posts/1736494633.html" title="hexo(sakura)——标签、分类页面美化" target="_blank">hexo(sakura)——标签、分类页面美化</a></li><li class="my-links-of-blogroll-li"><a href="/posts/1779179582.html" title="Github+PicGo配置私人图床踩坑记" target="_blank">Github+PicGo配置私人图床踩坑记</a></li><li class="my-links-of-blogroll-li"><a href="/posts/3058917998.html" title="C++实现链式队列和线性队列" target="_blank">C++实现链式队列和线性队列</a></li><li class="my-links-of-blogroll-li"><a href="/posts/198006710.html" title="栈的应用" target="_blank">栈的应用</a></li><li class="my-links-of-blogroll-li"><a href="/posts/4200755795.html" title="hexo(next)——每日一言、今日诗词" target="_blank">hexo(next)——每日一言、今日诗词</a></li></ul></div><div><canvas id="canvas" style="width:60%"></canvas></div><script>!function(){function t(t){var r=[];a.fillStyle="#005eac";var h=new Date,u=70,s=30,v=h.getHours(),g=Math.floor(v/10),m=v%10;r.push({num:g}),r.push({num:m}),r.push({num:10});var c=h.getMinutes(),g=Math.floor(c/10),m=c%10;r.push({num:g}),r.push({num:m}),r.push({num:10});var M=h.getSeconds(),g=Math.floor(M/10),m=M%10;r.push({num:g}),r.push({num:m});for(var p=0;p<r.length;p++)r[p].offsetX=u,u=f(u,s,r[p].num,t),p<r.length-1&&10!=r[p].num&&10!=r[p+1].num&&(u+=l);if(0==i.length)i=r;else for(var C=0;C<i.length;C++)i[C].num!=r[C].num&&(n(r[C]),i[C].num=r[C].num);return e(t),o(),h}function n(t){for(var n=t.num,e=m[n],o=0;o<e.length;o++)for(var f=0;f<e[o].length;f++)if(1==e[o][f]){var a={offsetX:t.offsetX+u+2*u*f,offsetY:30+u+2*u*o,color:g[Math.floor(Math.random()*g.length)],g:1.5+Math.random(),vx:4*Math.pow(-1,Math.ceil(10*Math.random()))+Math.random(),vy:-5};v.push(a)}}function e(t){for(var n=0;n<v.length;n++)t.beginPath(),t.fillStyle=v[n].color,t.arc(v[n].offsetX,v[n].offsetY,u,0,2*Math.PI),t.fill()}function o(){for(var t=0,n=0;n<v.length;n++){var e=v[n];e.offsetX+=e.vx,e.offsetY+=e.vy,e.vy+=e.g,e.offsetY>h-u&&(e.offsetY=h-u,e.vy=-e.vy*s),e.offsetX>u&&e.offsetX<r-u&&(v[t]=v[n],t++)}for(;t<v.length;t++)v.pop()}function f(t,n,e,o){for(var f=m[e],a=0;a<f.length;a++)for(var r=0;r<f[a].length;r++)1==f[a][r]&&(o.beginPath(),o.arc(t+u+2*u*r,n+u+2*u*a,u,0,2*Math.PI),o.fill());return o.beginPath(),t+=f[0].length*u*2}var a,r=820,h=250,u=7,l=10,s=.65,v=[];const g=["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];var i=[],m=[[[0,0,1,1,1,0,0],[0,1,1,0,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,0,1,1,0],[0,0,1,1,1,0,0]],[[0,0,0,1,1,0,0],[0,1,1,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[1,1,1,1,1,1,1]],[[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,0,1,1,0,0,0],[0,1,1,0,0,0,0],[1,1,0,0,0,0,0],[1,1,0,0,0,1,1],[1,1,1,1,1,1,1]],[[1,1,1,1,1,1,1],[0,0,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,0,1,1,1,0,0],[0,0,0,0,1,1,0],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],[[0,0,0,0,1,1,0],[0,0,0,1,1,1,0],[0,0,1,1,1,1,0],[0,1,1,0,1,1,0],[1,1,0,0,1,1,0],[1,1,1,1,1,1,1],[0,0,0,0,1,1,0],[0,0,0,0,1,1,0],[0,0,0,0,1,1,0],[0,0,0,1,1,1,1]],[[1,1,1,1,1,1,1],[1,1,0,0,0,0,0],[1,1,0,0,0,0,0],[1,1,1,1,1,1,0],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],[[0,0,0,0,1,1,0],[0,0,1,1,0,0,0],[0,1,1,0,0,0,0],[1,1,0,0,0,0,0],[1,1,0,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],[[1,1,1,1,1,1,1],[1,1,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,1,1,0,0,0],[0,0,1,1,0,0,0],[0,0,1,1,0,0,0],[0,0,1,1,0,0,0]],[[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],[[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,1,1,0,0,0,0]],[[0,0,0,0],[0,0,0,0],[0,1,1,0],[0,1,1,0],[0,0,0,0],[0,0,0,0],[0,1,1,0],[0,1,1,0],[0,0,0,0],[0,0,0,0]]],c=document.getElementById("canvas");c.width=r,c.height=h,a=c.getContext("2d"),new Date,setInterval(function(){a.clearRect(0,0,a.canvas.width,a.canvas.height),t(a)},50)}()</script><div id="days"></div><script language="javascript">function show_date_time(){window.setTimeout("show_date_time()",1e3),BirthDay=new Date("02/20/2020 00:00:00"),today=new Date,timeold=today.getTime()-BirthDay.getTime(),sectimeold=timeold/1e3,secondsold=Math.floor(sectimeold),msPerDay=864e5,e_daysold=timeold/msPerDay,daysold=Math.floor(e_daysold),e_hrsold=24*(e_daysold-daysold),hrsold=setzero(Math.floor(e_hrsold)),e_minsold=60*(e_hrsold-hrsold),minsold=setzero(Math.floor(60*(e_hrsold-hrsold))),seconds=setzero(Math.floor(60*(e_minsold-minsold))),document.getElementById("days").innerHTML="已运行"+daysold+"天"+hrsold+"时"+minsold+"分"+seconds+"秒"}function setzero(e){return e<10&&(e="0"+e),e}show_date_time()</script></div></section><section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active"><div class="post-toc"><div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#一、效果"><span class="nav-number">1.</span> <span class="nav-text">一、效果</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#二、标签页面"><span class="nav-number">2.</span> <span class="nav-text">二、标签页面</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-tags页面资源文件"><span class="nav-number">2.1.</span> <span class="nav-text">1. tags页面资源文件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-创建样式文件"><span class="nav-number">2.2.</span> <span class="nav-text">2. 创建样式文件</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#标签页面"><span class="nav-number">2.2.1.</span> <span class="nav-text">标签页面</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#创建样式文件"><span class="nav-number">2.2.2.</span> <span class="nav-text">创建样式文件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#创建js文件"><span class="nav-number">2.2.3.</span> <span class="nav-text">创建js文件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#引入tag-bubble-css和bubble-js"><span class="nav-number">2.2.4.</span> <span class="nav-text">引入tag-bubble.css和bubble.js</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#效果"><span class="nav-number">2.2.5.</span> <span class="nav-text">效果</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#三、分类页面"><span class="nav-number">3.</span> <span class="nav-text">三、分类页面</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-分类页面资源文件"><span class="nav-number">3.1.</span> <span class="nav-text">1. 分类页面资源文件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-创建样式文件-1"><span class="nav-number">3.2.</span> <span class="nav-text">2. 创建样式文件</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#标签页面-1"><span class="nav-number">3.2.1.</span> <span class="nav-text">标签页面</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#创建样式文件-1"><span class="nav-number">3.2.2.</span> <span class="nav-text">创建样式文件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#引入categories-love-css"><span class="nav-number">3.2.3.</span> <span class="nav-text">引入categories-love.css</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#效果-1"><span class="nav-number">3.2.4.</span> <span class="nav-text">效果</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#四、参考文章"><span class="nav-number">4.</span> <span class="nav-text">四、参考文章</span></a></li></ol></div></div></section></div></aside></div></main><footer id="footer" class="footer"><div class="footer-inner"><div class="copyright">&copy; <span itemprop="copyrightYear">2020</span> <span class="with-love"><i class="fa fa-heartbeat"></i> </span><span class="author" itemprop="copyrightHolder">云开、见月明</span></div><div class="theme-info"><div class="powered-by"></div><span class="post-count">全站共21.8k字 &nbsp;|&nbsp; Since 2020/02/20 ❥(^_-)</span></div><div class="busuanzi-count"><script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><span class="site-uv">我的第 <span class="busuanzi-value" id="busuanzi_value_site_uv"></span> 位朋友 </span><span class="site-pv">经历 <span class="busuanzi-value" id="busuanzi_value_site_pv"></span> 次回眸才与你相遇</span></div></div></footer><div class="back-to-top"><i class="fa fa-arrow-up"></i> <span id="scrollpercent"><span>0</span>%</span></div></div><script type="text/javascript">"[object Function]"!==Object.prototype.toString.call(window.Promise)&&(window.Promise=null)</script><script type="text/javascript" src="//cdn.jsdelivr.net/npm/jquery@2.1.3/dist/jquery.min.js"></script><script type="text/javascript" src="//cdn.jsdelivr.net/fastclick/1.0.6/fastclick.min.js"></script><script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazyload/1.9.3/jquery.lazyload.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/velocity-animate@1.2.1/velocity.min.js"></script><script type="text/javascript" src="//cdn.jsdelivr.net/npm/velocity-animate@1.2.1/velocity.ui.min.js"></script><script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script><script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script><script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script><script type="text/javascript" src="/js/src/affix.js?v=5.1.4"></script><script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.4"></script><script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script><script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script><script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script><script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script><script src="/js/src/Valine.min.js"></script><style>.v .vlist{border-radius:10px;padding-top:10px}.v .vwrap{border:2px solid #1acddb;border-radius:10px;padding:0 0 44px}.v .veditor{min-height:10rem;background-image:url(https://s1.ax1x.com/2020/03/24/8LLItH.png);background-size:contain;background-repeat:no-repeat;background-position:left;background-color:rgba(255,255,255,0);resize:none}.v .vwrap .vedit{padding-top:20px}.v .vwrap .vheader{width:80%;bottom:0;position:absolute;background:#fff7f7f7}.v .vinput{padding:10px 15px;text-align:center}.v .vwrap .vheader .vinput{border-bottom:0}.v .vwrap .vedit .vctrl{margin-top:-44px;right:0;position:absolute;margin-right:-3px}.v .vwrap .vcontrol{position:absolute;right:0;bottom:0;width:20%;padding-top:0}.v .vwrap .vcontrol .col.col-20,.v .vwrap .vedit .vctrl span.vpreview-btn{display:none}.v .vwrap .vcontrol .col.col-80{width:100%}.v .vbtn.vsubmit{border-radius:10px;padding:0;color:#fff;line-height:44px;width:100%;border:none;background:#f99}.v .vbtn.vsubmit:hover{border-radius:10px;padding:0;color:#fff;line-height:44px;width:100%;border:none;background:#c3dfe3}.v .vlist .vcard .vhead .vsys{background:#91f6d6}@media screen and (max-width:520px){.v .vwrap .vheader .vinput{width:33.33%;padding:10px 5px}}a.at{font-size:20px;color:#bea124}</style><script type="text/javascript">new Valine({lang:"zh-cn",admin_email:"1755899681@qq.com",el:"#comments",appId:"47oVoB4SBf9W5vXsRcqzLw2y-gzGzoHsz",appKey:"03rXHWk23vFQQasnSaFrYOa4",placeholder:"是我一生只会遇见一次的惊喜 ..."}),$(document).ready(function(){$("#comments").on("click","span.vat",function(){$(this).parent("div.vmeta").next("div.vcontent").after($("div.vwrap")),$("textarea#veditor").focus()})})</script><script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script><script type="text/javascript">jinrishici.load(function(t){var i=t.data.content+"\n「"+t.data.origin.title+"」"+t.data.origin.dynasty+" · "+t.data.origin.author;document.getElementById("veditor").setAttribute("placeholder",i)})</script><script type="text/javascript">function proceedsearch(){$("body").append('<div class="search-popup-overlay local-search-pop-overlay"></div>').css("overflow","hidden"),$(".search-popup-overlay").click(onPopupClose),$(".popup").toggle();var t=$("#local-search-input");t.attr("autocapitalize","none"),t.attr("autocorrect","off"),t.focus()}var isfetched=!1,isXml=!0,search_path="./public/search.xml";0===search_path.length?search_path="search.xml":/json$/i.test(search_path)&&(isXml=!1);var path="/"+search_path,onPopupClose=function(t){$(".popup").hide(),$("#local-search-input").val(""),$(".search-result-list").remove(),$("#no-result").remove(),$(".local-search-pop-overlay").remove(),$("body").css("overflow","")},searchFunc=function(t,e,o){"use strict";$("body").append('<div class="search-popup-overlay local-search-pop-overlay"><div id="search-loading-icon"><i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i></div></div>').css("overflow","hidden"),$("#search-loading-icon").css("margin","20% auto 0 auto").css("text-align","center"),$.ajax({url:t,dataType:isXml?"xml":"json",async:!0,success:function(t){isfetched=!0,$(".popup").detach().appendTo(".header-inner");var n=isXml?$("entry",t).map(function(){return{title:$("title",this).text(),content:$("content",this).text(),url:$("url",this).text()}}).get():t,r=document.getElementById(e),s=document.getElementById(o),a=function(){var t=r.value.trim().toLowerCase(),e=t.split(/[\s\-]+/);e.length>1&&e.push(t);var o=[];if(t.length>0&&n.forEach(function(n){function r(e,o,n,r){for(var s=r[r.length-1],a=s.position,i=s.word,l=[],h=0;a+i.length<=n&&0!=r.length;){i===t&&h++,l.push({position:a,length:i.length});var p=a+i.length;for(r.pop();0!=r.length&&(s=r[r.length-1],a=s.position,i=s.word,p>a);)r.pop()}return c+=h,{hits:l,start:o,end:n,searchTextCount:h}}function s(t,e){var o="",n=e.start;return e.hits.forEach(function(e){o+=t.substring(n,e.position);var r=e.position+e.length;o+='<b class="search-keyword">'+t.substring(e.position,r)+"</b>",n=r}),o+=t.substring(n,e.end)}var a=!1,i=0,c=0,l=n.title.trim(),h=l.toLowerCase(),p=n.content.trim().replace(/<[^>]+>/g,""),u=p.toLowerCase(),f=decodeURIComponent(n.url),d=[],g=[];if(""!=l&&(e.forEach(function(t){function e(t,e,o){var n=t.length;if(0===n)return[];var r=0,s=[],a=[];for(o||(e=e.toLowerCase(),t=t.toLowerCase());(s=e.indexOf(t,r))>-1;)a.push({position:s,word:t}),r=s+n;return a}d=d.concat(e(t,h,!1)),g=g.concat(e(t,u,!1))}),(d.length>0||g.length>0)&&(a=!0,i=d.length+g.length)),a){[d,g].forEach(function(t){t.sort(function(t,e){return e.position!==t.position?e.position-t.position:t.word.length-e.word.length})});var v=[];0!=d.length&&v.push(r(l,0,l.length,d));for(var $=[];0!=g.length;){var C=g[g.length-1],m=C.position,x=C.word,w=m-20,y=m+80;w<0&&(w=0),y<m+x.length&&(y=m+x.length),y>p.length&&(y=p.length),$.push(r(p,w,y,g))}$.sort(function(t,e){return t.searchTextCount!==e.searchTextCount?e.searchTextCount-t.searchTextCount:t.hits.length!==e.hits.length?e.hits.length-t.hits.length:t.start-e.start});var T=parseInt("1");T>=0&&($=$.slice(0,T));var b="";b+=0!=v.length?"<li><a href='"+f+"' class='search-result-title'>"+s(l,v[0])+"</a>":"<li><a href='"+f+"' class='search-result-title'>"+l+"</a>",$.forEach(function(t){b+="<a href='"+f+'\'><p class="search-result">'+s(p,t)+"...</p></a>"}),b+="</li>",o.push({item:b,searchTextCount:c,hitCount:i,id:o.length})}}),1===e.length&&""===e[0])s.innerHTML='<div id="no-result"><i class="fa fa-search fa-5x" /></div>';else if(0===o.length)s.innerHTML='<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>';else{o.sort(function(t,e){return t.searchTextCount!==e.searchTextCount?e.searchTextCount-t.searchTextCount:t.hitCount!==e.hitCount?e.hitCount-t.hitCount:e.id-t.id});var a='<ul class="search-result-list">';o.forEach(function(t){a+=t.item}),a+="</ul>",s.innerHTML=a}};r.addEventListener("input",a),$(".local-search-pop-overlay").remove(),$("body").css("overflow",""),proceedsearch()}})};$(".popup-trigger").click(function(t){t.stopPropagation(),isfetched===!1?searchFunc(path,"local-search-input","local-search-result"):proceedsearch()}),$(".popup-btn-close").click(onPopupClose),$(".popup").click(function(t){t.stopPropagation()}),$(document).on("keyup",function(t){var e=27===t.which&&$(".search-popup").is(":visible");e&&onPopupClose()})</script><script>function addCount(Counter) {
      var $visitors = $('.leancloud_visitors');
      var url = $visitors.attr('id').trim();
      var title = $visitors.attr('data-flag-title').trim();

      Counter('get', '/classes/Counter', { where: JSON.stringify({ url }) })
        .done(function({ results }) {
          if (results.length > 0) {
            var counter = results[0];
            
            Counter('put', '/classes/Counter/' + counter.objectId, JSON.stringify({ time: { '__op': 'Increment', 'amount': 1 } }))
            
              .done(function() {
                var $element = $(document.getElementById(url));
                $element.find('.leancloud-visitors-count').text(counter.time + 1);
              })
            
              .fail(function ({ responseJSON }) {
                console.log('Failed to save Visitor num, with error message: ' + responseJSON.error);
              })
          } else {
            
              Counter('post', '/classes/Counter', JSON.stringify({ title: title, url: url, time: 1 }))
                .done(function() {
                  var $element = $(document.getElementById(url));
                  $element.find('.leancloud-visitors-count').text(1);
                })
                .fail(function() {
                  console.log('Failed to create');
                });
            
          }
        })
        .fail(function ({ responseJSON }) {
          console.log('LeanCloud Counter Error: ' + responseJSON.code + ' ' + responseJSON.error);
        });
    }
    

    $(function() {
      $.get('https://app-router.leancloud.cn/2/route?appId=' + '47oVoB4SBf9W5vXsRcqzLw2y-gzGzoHsz')
        .done(function({ api_server }) {
          var Counter = function(method, url, data) {
            return $.ajax({
              method: method,
              url: 'https://' + api_server + '/1.1' + url,
              headers: {
                'X-LC-Id': '47oVoB4SBf9W5vXsRcqzLw2y-gzGzoHsz',
                'X-LC-Key': '03rXHWk23vFQQasnSaFrYOa4',
                'Content-Type': 'application/json',
              },
              data: data
            });
          };
          
            const localhost = /http:\/\/(localhost|127.0.0.1|0.0.0.0)/;
            if (localhost.test(document.URL)) return;
            addCount(Counter);
          
        });
    });</script><script>!function(){var t=document.createElement("script"),s=window.location.protocol.split(":")[0];"https"===s?t.src="https://zz.bdstatic.com/linksubmit/push.js":t.src="http://push.zhanzhang.baidu.com/push.js";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}()</script><script src="https://cdn.jsdelivr.net/gh/1999cyx/cdn@1.0/js/cursor/love.min.js"></script><script src="https://cdn.jsdelivr.net/gh/1999cyx/cdn@1.0/js/src/activate-power-mode.min.js"></script><script>POWERMODE.colorful=!0,POWERMODE.shake=!1,document.body.addEventListener("input",POWERMODE)</script><script async src="https://cdn.jsdelivr.net/gh/1999cyx/cdn@1.0/js/src/sakura.js"></script><script async src="https://cdn.jsdelivr.net/gh/1999cyx/cdn@1.0/js/src/fairyDustCursor.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/1999cyx/cdn@1.0/js/src/clipboard.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/1999cyx/cdn@1.0/js/src/clipboard-use.js"></script><link rel="stylesheet" href="/sharejs/css/share.min.css"><script src="/sharejs/js/social-share.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/1999cyx/cdn@1.0/js/src/linkcard.js"></script><script>!function(t){function n(){for(var n=0;n<e.length;n++)i=e[n],0<=(o=i.getBoundingClientRect()).bottom&&0<=o.left&&o.top<=(t.innerHeight||document.documentElement.clientHeight)&&function(){var t,i,o,r,c=e[n];t=c,i=function(){e=e.filter(function(t){return c!==t})},o=new Image,r=t.getAttribute("data-original"),o.onload=function(){t.src=r,i&&i()},o.src=r}();var i,o}var e=Array.prototype.slice.call(document.querySelectorAll("img[data-original]"));n(),t.addEventListener("scroll",function(){var e,i;e=n,i=t,clearTimeout(e.tId),e.tId=setTimeout(function(){e.call(i)},500)})}(this)</script><script>window.addEventListener("load",function(){var a=/\.(gif|jpg|jpeg|tiff|png)$/i,e=/^data:image\/[a-z]+;base64,/;Array.prototype.slice.call(document.querySelectorAll("img[data-original]")).forEach(function(t){var r=t.parentNode;"A"===r.tagName&&(r.href.match(a)||r.href.match(e))&&(r.href=t.dataset.original)})})</script></body></html><!-- rebuild by neat -->